<template>
	<view>
		<view v-if="authorized">
			<view class="head-container">
				<image :src="avatar" mode="aspectFill" class="img-avatar"></image>
				<view class="info-container">
					<view class="nick-container">
						<text class="txt-nick">{{nick + "-" + "[" + uTypes[type] +"]"}}</text>
						<image :src="badges[type]" mode="widthFix" class="img-badge"></image>
					</view>
					<text class="txt-user">{{user + ":" + email}}</text>
				</view>
			</view>

			<view class="data-container">
				<view class="data-title" @click="clickSwitch(2)">
					<text class="data-title-name">我点赞的{{myGoodBlogs.length}}篇文章</text>
					<text :class="status[2].visible?'iconfont icon-zhcc_xiangshangjiantou ic-arrow' 
						: 'iconfont icon-down ic-arrow'"></text>
				</view>
				<scroll-view v-if="status[2].visible" scroll-x class="scroll" scroll-with-animation="true"
					@scrolltolower="getMyBlogs">
					<view v-for="(blog,index) in myGoodBlogs" :key="'g_'+blog.id" class="scroll-item"
						@click="clickGoBlog(blog.id)">
						<image :src="blog.picture" mode="aspectFill"></image>
						<text>{{blog.title}}</text>
					</view>
				</scroll-view>
			</view>

			<text class="iconfont icon-zhuxiao ic-zhuxiao" @click="clickLogout"></text>
			<view class="data-container">
				<view class="data-title" @click="clickSwitch(0)">
					<text class="data-title-name">我发布的{{myCount}}篇文章</text>
					<text :class="status[0].visible ?  'iconfont icon-zhcc_xiangshangjiantou ic-arrow' 
						: 'iconfont icon-down ic-arrow'"></text>
				</view>
				<scroll-view v-if="status[0].visible" scroll-x class="scroll" scroll-with-animation="true"
					@scrolltolower="getMyBlogs">
					<view v-for="(blog,index) in myBlogs" :key=" 'm_' +blog.id" class="scroll-item"
						@click="clickGoBlog(blog.id)">
						<image :src="blog.picture" mode="aspectFill"></image>
						<text>{{blog.title}}</text>
					</view>
				</scroll-view>
			</view>

			<view class="data-container">
				<view class="data-title" @click="clickSwitch(1)">
					<text class="data-title-name">我管理的6条类别数据</text>
					<text
						:class="status[1].visible ?  'iconfont icon-zhcc_xiangshangjiantou ic-arrow' : 'iconfont icon-down ic-arrow'"></text>
				</view>
				<view v-if="status[1].visible" class="data-list">
					<view class="data-item" v-for="(c, index) in categories" :key="c.id">
						<text class="data-item-name" @click="clickUpdateCategory(c.id,c.name)"> {{c.name}} </text>
						<text :class="c.count==0?'data-item-btn':'data-item-count'"
							@click="c.count==0?clickDelete(c.id,c.name):''"> {{c.count==0?'X':c.count}} </text>
					</view>
					<view class="data-item">
						<text class="iconfont icon-tianjia ic-add" @click="clickAdd"></text>
					</view>
				</view>
			</view>
			<view class="data-container"></view>
			<dialog-shell ref="add_shell" title="添加类别" @confirm="confirmAdd">
				<view class="" style="margin: :10rpx;">
					<input type="text" placeholder="请输入新的名称" focus style="padding-left: 15rpx;" @input="inputGetValue">
				</view>
			</dialog-shell>
			<dialog-shell ref="update_shell" title="修改类别名称" @confirm="confirmUpdate">
				<view class="" style="margin: :10rpx;">
					<input type="text" placeholder="请输入新的名称" :value="oldName" focus style="padding-left: 15rpx;"
						@input="inputGetValue">
				</view>
			</dialog-shell>
		</view>
		<login-dialog ref="login" @after="afterLogin"></login-dialog>
	</view>
</template>

<script>
	import {
		DiffieHellman
	} from 'crypto'
	let app = getApp()
	let page = 0
	let newName = ""
	let updateId = ""
	export default {
		data() {
			return {
				authorized: app.globalData.token.length > 0,
				avatar: this.$params.host + app.globalData.avatar,
				nick: app.globalData.nickName,
				type: app.globalData.type,
				uTypes: ["管理员", "认证博主", "普通会员"],
				badges: ["../../static/icons(1)/badge0.png", "../../static/icons(1)/badge1.png",
					"../../static/icons(1)/badge2.png"
				],
				user: app.globalData.userName,
				email: app.globalData.email,
				status: [{
						visible: false
					}, {
						visible: false
					},
					{
						visible: false
					}
				],
				myGoodBlogs: [],
				myBlogs: [],
				myCount: -1,
				categories: [],
				oldName: ""
			}
		},
		onLoad() {
			this.$noti.add(this.$params.noti_login_status, this.afterLogin, this)
		},
		onShow() {
			if (this.authorized) {
				return
			}
			this.loadData()
		},
		onUnload() {
			this.$noti.remove(this.$params.noti_login_status, this)
		},
		mounted() {
			this.authorized = app.globalData.token.length > 0
			if (!this.authorized) {
				this.$refs.login.show()
			}
		},
		methods: {
			clickGoBlog(id) {
				uni.navigateTo({
					url: '../blog/blog?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			loadData() {
				this.myBlogs = []
				this.myCount = -1
				page = 0
				this.getMyBlogs()
				this.getCategories()
				this.MyGoodBlogs()

			},
			MyGoodBlogs() {
				if (this.myGoodBlogs >= 0 && this.myGoodBlogs.length == this.myGoodCount) return
				//TODO 完成点赞过的文章
				let goods = uni.getStorageSync(this.$params.key_good_ids);
				this.myGoodBlogs = []
				this.myGoodCount = -1;
				goods.forEach(good => {
					this.$request.get(this.$params.host + this.$params.action_hot + good, (res) => {
						if (!res.data.picture.startsWith('http')) res.data.picture = this.$params.host +
							res.data.picture
						// console.log(res);
						console.log(res);
						let item = {
							"title": res.data.title,
							"id": res.data.id,
							"picture": res.data.picture
						}
						this.myGoodBlogs = this.myGoodBlogs.concat(item);
						this.myGoodCount = goods.length;
						this.status[1].Visible = this.myGoodCount > 0;
						// console.log(this.myGoodBlogs);
					}, () => {})

				})
			},
			getMyBlogs() {
				if (this.myCount >= 0 && this.myBlogs.length == this.myCount) {
					return
				}
				let header = {
					"content-type": "application/josn;charset=UTF-8",
					"page": page++,
					"size": 2
				}
				let url = this.$params.host + this.$params.action_my_blogs + app.globalData.uid
				this.$request.getWithHeader(url, header, res => {
					res.data.forEach(blog => {
						if (!blog.picture.startsWith('http')) {
							blog.picture = this.$params.host + blog.picture
						}
					})
					this.myBlogs = this.myBlogs.concat(res.data)
					this.myCount = parseInt(res.message)
					this.status[0].visible = this.myCount > 0
				}, () => {})
			},

			clickSwitch(index) {
				let now = this.status[index].visible
				this.status[index].visible = !now
			},
			afterLogin() {
				if (this.authorized) {
					return
				}
				this.authorized = app.globalData.token.length > 0
				this.nick = app.globalData.nickName
				this.type = app.globalData.type
				this.user = app.globalData.userName
				this.email = app.globalData.email
				this.avatar = this.$params.host + app.globalData.avatar
				this.loadData()
			},
			clickLogout() {
				let url = this.$params.host + this.$params.action_logout
				let data = {
					token: app.globalData.token
				}
				this.$request.postParam(url, data, res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					if (res.success) {
						this.authorized = false
						app.globalData.avatar = "/static/icons(1)/default_user.png"
						app.globalData.type = -1
						app.globalData.nickName = ""
						app.globalData.userName = ""
						app.globalData.token = ""
						app.globalData.email = ""
						this.afterLogin();
						this.myBlogs = []
						this.myCount = -1
						page = 0
						this.$refs.login.show()
					}
				}, () => {})
			},
			getCategories() {
				//todo:首先检查用户身份，只有管理员才可以请求类别数据
				this.categories = []
				let url = this.$params.host + this.$params.action_categories
				this.$request.get(url, res => {
					url = this.$params.host + this.$params.action_category_count
					res.data.forEach(async (c) => {
						//let categories = []
						let r = await this.$request.requestAsync(url + c.id)
						if (r.data.success) {
							let category = {
								id: c.id,
								name: c.name,
								count: r.data.data
							}
							this.categories.push(category)
						}
					})
				}, () => {})
			},
			confirmAdd() {
				//1.检查数据合法性
				if (newName.trim().length == 0) {
					uni.showToast({
						title: '请输入类别名称',
						icon: 'none'
					});
					return
				}
				//2.标签，先确认类别或标签
				//3.发送请求
				let url = this.$params.host + this.$params.action_category_add
				let data = {
					"token": app.globalData.token,
					"name": newName
				}
				this.$request.requestAsync(url, data, 'POST')
					.then(res => {
						if (!res.data.success) {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						} else {
							let category = {
								id: res.data.data.id,
								name: res.data.data.name,
								count: 0
							}
							this.categories.push(category)
						}
						newName = ""
					})
					.catch(err => {
						newName = ""
						console.log(err);
					})
			},
			inputGetValue(e) {
				newName = e.detail.value
			},
			clickAdd() {
				this.$refs.add_shell.show()
			},
			clickUpdateCategory(id, name) {
				newName = name
				updateId = id
				this.oldName = name
				this.$refs.update_shell.show()
			},
			confirmUpdate() {
				if (newName.trim().length == 0) {
					uni.showToast({
						title: '请输入类别名称',
						icon: 'none'
					});
					return
				}
				let url = this.$params.host + this.$params.action_category_put + updateId
				let data = {
					"token": app.globalData.token,
					"name": newName
				}
				this.$request.requestAsync(url, data, 'PUT')
					.then(res => {
						if (!res.data.success) {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						} else {
							this.categories.forEach(c => {
								if (c.id == res.data.data.id) {
									c.name = res.data.data.name
								}
							})
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			clickDelete(id, name) {
				let url = this.$params.host + this.$params.action_category_del + id
				let data = {
					"token": app.globalData.token
				}
				uni.showModal({
					title: '确认',
					content: '确认要删除' + name + '吗？',
					showCancel: true,
					cancelText: '再想想',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.$request.deleteParams(url, data, res => {
								if (res.success) {
									this.categories = this.categories.filter(c => c.id != id)
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none'
									});
								}
							}, () => {})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	@import url("profile.css");
</style>